<template>
    <div class="container">
        <Form :model="formTop" label-position="top">
        <div class="title">
            <div class="sub-title">
                <span>接触人员基本信息</span>
                <div class="group">
                    <Input search placeholder="请输入身份证号" v-model="formTop.input0" style="width: 280px;"/>
                    <div class="history">查看数据库 <Icon type="md-link" /></div>
                </div>
            </div>
        </div>
        <div class="sub-content">
            <Row :gutter="20">
                <Col span="8">
                    <FormItem label="姓名">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="性别">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in sexType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="年龄">
                        <Input v-model="formTop.input2"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="证件类型">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in cardType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="证件号码">
                        <Input v-model="formTop.input3"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="联系电话">
                        <Input v-model="formTop.input4"></Input>
                    </FormItem>
                </Col>
            </Row>
        </div>
            <div class="title">
                <div class="sub-title"><span>患者详情</span></div>
            </div>
            <div class="sub-content">
                <Row :gutter="20">
                    <Col span="8">
                        <FormItem label="患者姓名">
                            <Input v-model="formTop.input1"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="来源国家">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in sexType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="确诊时间">
                            <Input v-model="formTop.input2"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="证件类型">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in cardType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="证件号码">
                            <Input v-model="formTop.input3"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="联系电话">
                            <Input v-model="formTop.input4"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </div>
        <div class="title">
            <div class="sub-title"><span>接触详情</span></div>
        </div>
        <div class="sub-content">
            <Row :gutter="20">
                <Col span="12">
                    <FormItem label="接触时间">
                        <DatePicker type="date" placeholder="Select date" style="width: 100%"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="接触方式">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in closeType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="24">
                    <FormItem label="接触人现状">
                        <Input  v-model="formTop.input12" type="textarea" :autosize="true" placeholder="Enter something..." />
                    </FormItem>
                </Col>
            </Row>
        </div>
        </Form>
    </div>
</template>

<script>
export default {
  data () {
    return {
      formTop: {
        input0: '请输入身份证号',
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        // input5: '',
        // input6: '',
        // input7: '',
        // input8: '',
        // input9: '',
        // input10: '',
        // input11: '',
        input12: ''
        // input13: '',
        // input14: '',
        // input15: '',
        // input16: '',
        // input17: '',
        // input18: ''
      },
      closeType: [
        {
          value: '医学观察点密接',
          label: '飞机'
        },
        {
          value: '火车',
          label: '火车'
        },
        {
          value: '转运',
          label: '转运'
        }
      ],
      cardType: [
        {
          value: '身份证',
          label: '身份证'
        },
        {
          value: '护照',
          label: '护照'
        },
        {
          value: '港澳台通行证',
          label: '港澳台通行证'
        }
      ],
      planParkList: [
        {
          value: '首都机场',
          label: '首都机场'
        },
        {
          value: '桃仙',
          label: '桃仙'
        }
      ],
      sexType: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ],
      cityList: [
        {
          value: '沈阳',
          label: '沈阳'
        },
        {
          value: '大连',
          label: '大连'
        }
      ],
      countryList: [
        {
          value: '美国',
          label: '美国'
        },
        {
          value: '意大利',
          label: '意大利'
        },
        {
          value: '日本',
          label: '日本'
        }
      ]
    }
  }
}
</script>

<style scoped>
    .title {
        padding: 20px 0;
        border-bottom: 1px solid #efefef;
    }
    .sub-title {
        border-left: 7px solid darkred;
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-content {
        border: 10px solid #efefef;
        padding: 20px 20px 0 20px;
    }
    .btn-op {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    .history {
        color: darkred;
        display: flex;
        align-items: center;
        margin-left: 10px;
        font-size: 12px;
    }
    .group {
        display: flex;
    }
</style>
